<template>
 <div class="date-picker">
  <scroll-container
  :field="DateMark.YEAR"
  @set-year="handleSetYear"
  >
    <list-item
    v-for="year of yearArr"
    :key="year"
    
    >{{ year }}</list-item>
  </scroll-container>
    <scroll-container
     :field="DateMark.MONTH"
     @set-month="handleSetMonth"
    >
    <list-item
    v-for="month of monthArr"
    :key="month"
    >{{ month }}</list-item>
  </scroll-container>
    <scroll-container
     :field="DateMark.DAY"
     @set-day="handleSetDay"
    >
    <list-item
    v-for="day of data.dayArr"
    :key="day"
    >{{ day }}</list-item>
  </scroll-container>
 </div>
</template>
<script setup lang="ts">
import {reactive,provide, toRaw} from 'vue';
import ScrollContainer from './ScrollContainer.vue';
import ListItem from './ListItem.vue';
import {createMonthArr,createDayArr} from './utils.ts'
import { IProps,TypeDate,DateMark} from './types.ts';

const props = defineProps<IProps>();
const emit = defineEmits(['dateChange']);
const monthArr = createMonthArr();
const yearArr = props.years

const data = reactive<TypeDate>({
  currentDate: props.currentDate,
  dayArr:createDayArr(props.currentDate)
})

provide('provideData',{
  currentDate:data.currentDate,
  years:yearArr,
  months:monthArr,
  days:data.dayArr
})
function handleSetYear(index:number){
  data.currentDate[0] = yearArr[index];
  data.dayArr = createDayArr(data.currentDate);  // 重新获取当月天数，保证日历正确。  月份和年份改变时，天数也要随之改变。  注意：这是一个假设，如果需要更严的检查，可以加入相关的函数。  这段代码并未在此处执行，而是在 handleSetYear 和 handleSetMonth 内执行。  这是为了保证
  emit('dateChange',toRaw(data.currentDate))
}
function handleSetMonth(index:number){
  data.currentDate[1] = monthArr[index];
  data.dayArr = createDayArr(data.currentDate);
  emit('dateChange', toRaw(data.currentDate))
}
function handleSetDay(index:number){
  data.currentDate[2] = data.dayArr[index];
  emit('dateChange', toRaw(data.currentDate))
}

</script>
<style lang="scss" >
.date-picker{
display: flex;
flex-direction: row;
width: 100%;
height: 250px;
}
/* 这个滚动 */
.scroll-container{ 
    position: relative;
    width: 100%;
    height: 100%;
}
/* 盒子里面不滚动 */
.scroll-wrapper{
    overflow-y: auto;
    height: 250px;
    /* 捕捉滚动内部的子元素 监控y */
    scroll-snap-type: y mandatory;
}

/* 去掉滚动条 */
::-webkit-scrollbar{
    display: none;
}
.target-center{
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: -1;
    border-top:1px solid #ddd;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(
        180deg,
        hsla(0,0%,100%,1),
        hsla(0,0%,100%,.8),
        hsla(0,0%,100%,0),
        hsla(0,0%,100%,.8),
        hsla(0,0%,100%,1)

    );
    pointer-events: none;
}
</style>